﻿@model Guoc.BigMall.Domain.Entity.Menu
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<div id="app" class="box box-primary">

    <div class="box-header with-border">
        <ol class="breadcrumb" style="padding:0px;margin:1px;">
            <li><a href="/Menu/Index"><i class="fa fa-dashboard"></i> 菜单管理</a></li>
            <li class="active"><a href="/Menu/Edit/{{ruleForm.id}}">修改菜单</a></li>
        </ol>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="100px" style="margin: 20px;" class="demo-ruleForm">
    
        <el-form-item prop="id" hidden>
            <el-col :span="6">
                <el-input v-model="ruleForm.id"  ></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="菜单名" prop="name">
            <el-col :span="6">
                <el-input v-model="ruleForm.name" placeholder="输入菜单名"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="链接" prop="url">
            <el-col :span="6">
                <el-input v-model="ruleForm.url" placeholder="输入菜单名"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="链接类型" prop="urlType">
            <el-col :span="6">
                <el-select v-model="ruleForm.urlType">

                    @foreach (var item in ViewBag.menutypes)
                    {
                        <el-option key="@item.Key" label="@item.Value" value="@item.Key"></el-option>
                       
                    }

                </el-select>

            </el-col>
        </el-form-item>
        <el-form-item label="父菜单" prop="parentId">
            <menu-selector v-model="ruleForm.parentId"  placeholder="选择父菜单"></menu-selector>

        </el-form-item>

        <el-form-item label="图标" prop="icon">
            <el-col :span="6">
                <el-input v-model="ruleForm.icon" placeholder="输入图标"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item label="排序" prop="displayOrder">
            <el-col :span="6">
                <el-input v-model.number="ruleForm.displayOrder" placeholder="输入排序"></el-input>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" v-on:click="submitForm('ruleForm')">保存</el-button>
            <el-button v-on:click="resetForm">取消</el-button>
        </el-form-item>
    </el-form>

</div>

@section scripts{
    
<script src="~/Content/vue/plugins/menu-selector/menu-selector.js"></script>
<script>

    var validatePass = (rule, value, callback) => {
        var first=value.substring(0,1);
    if (first!== '#'&&first!=="/") {
        callback(new Error('输入#或者/开头的链接地址'));
    }  else {
        callback();
    }
    };

    var demo = new Vue({

        el: '#app',
        data: {


            ruleForm: {
                name: '@Model.Name',
                parentId: @Model.ParentId ,
                label: '@ViewBag.parentName',
                url: '@Model.Url',
                icon: '@Model.Icon', //文件夹
                displayOrder: @Model.DisplayOrder,
                urlType: '@Model.UrlType',
                id:@Model.Id,
               
              
            },


            rules: {
                name: [
                    { required: true, message: '请输入菜单名', trigger: 'blur' }
                ],
                displayOrder: [
                    {type:"integer",message:'请输入数字！',trigger:'blur'}

                ],
                url: [
                   { required: true, message: '请输入链接！', trigger: 'blur' },
                   { validator: validatePass, trigger: 'blur' }
                ],
                urlType:[   { required: true, message: '请选择链接类型！', trigger: 'blur' }]

            }

        },

        methods: {
            resetForm:function() {
                window.location="/Menu/Index";
            },

            submitForm:function(formName) {
                var v_data = this.ruleForm;
              
                var v_data = this.ruleForm;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post("/Menu/Edit", v_data, function (result) {
                            if (result.success) {

                                demo.$alert('修改成功', '成功', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        window.location.href = "/Menu/Index";
                            }
                        });
            }
        else {
        //bootbox.alert(result.error);
                                demo.$message({
        type: 'error',
        message: result.error
    });
    }
    }, "json");
    } else {
        console.log('error submit!!');
        return false;
    }
    })
    },

    }
    })

</script>



    }


<!-- demo root element -->
@*<div id="app" class="box box-primary">
    <div class="box-header with-border">
        <ol class="breadcrumb" style="padding:0px;margin:1px;">
            <li><a href="/Menu/Index"><i class="fa fa-dashboard"></i> 菜单管理</a></li>
            <li class="active"><a href="/Menu/Index">修改菜单</a></li>
        </ol>

    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form v-on:submit.prevent="onSubmit">
        <div class="box-body">
            <v-form v-bind:valid.sync="valid">
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <input type="hidden" class="form-control" v-model="model.id">
                        <v-input type="text" label="菜单名：" v-bind:value.sync="model.name" placeholder="输入菜单名" required icon></v-input>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <v-input type="text" label="链接：" v-bind:value.sync="model.url" placeholder="输入链接：" v-bind:pattern="checkUrl" help="输入#或者/开头的地址" required icon></v-input>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-sm-2 col-xs-2">
                        <label for="inputPassword3" class="control-label">连接类型：</label>
                        <select class="form-control" v-model="model.urlType">
                            @foreach (var item in ViewBag.menutypes)
                            { 
                                <option value="@item.Key">@item.Value</option>
                            }
                        </select>                       
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-sm-4 col-xs-4">
                        <label for="inputPassword3" class="control-label">父菜单：</label>
                        <input type="hidden" class="form-control" v-model="model.parentId">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="选择父菜单" v-model="model.parentName" readonly>
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default btn-flat" v-on:click="show">
                                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <v-input type="text" label="图标：" v-bind:value.sync="model.icon" placeholder="输入图标：" icon></v-input>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <v-input type="text" label="排序：" v-bind:value.sync="model.displayOrder" placeholder="输入排序：" v-bind:mask="checkOrder" pattern="^[0-9]+$" icon></v-input>
                    </div>
                </div>
            </v-form>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <div class="row">
                <div class="col-sm-4 col-xs-4">
                    <button type="submit" class="btn btn-warning btn-flat" v-bind:disabled="!valid">保 存</button>
                    <a class="btn btn-default btn-flat" href="/Menu/Index">取 消</a>
                </div>
            </div>
        </div>
    </form>
    <!-- /.box-footer -->
    <v-modal title="选择菜单" ok-text="确 定" cancel-text="取 消" v-bind:callback="selectRow" v-bind:show.sync="modal" v-bind:effect="fade" large>
        <div slot="modal-body" class="modal-body">
            <vue-table v-bind:columns="gridColumns"
                       v-bind:url="url"
                       v-bind:args="searchArgs" height="400px" v-bind:data.sync="rows">
                <div class="row" style="margin-bottom:10px;" slot="customSearch">
                    <div class="col-xs-3">
                        <input class="form-control" v-model="searchArgs.name" placeholder="输入菜单名" />
                    </div>
                </div>
            </vue-table>
        </div>
    </v-modal>
</div>
@{Html.RenderPartial("VueTableTemplate");}
@section scripts{
    <script src="~/Content/Vue/vuetable/vuetable.js"></script>
    <script>
        var demo = new Vue({
            components: {
                'v-modal': VueStrap.modal,
                'v-input': VueStrap.input,
                'v-form': VueStrap.formGroup
            },
            el: '#app',
            data: {
                modal: false,
                valid: false,
                model: {
                    name: '@Model.Name',
                    parentId: @Model.ParentId ,
                    parentName: '@ViewBag.parentName',
                    url: '@Model.Url',
                    icon: '@Model.Icon', //文件夹
                    displayOrder: @Model.DisplayOrder,
                    urlType: @((int)Model.UrlType),
                    id:@Model.Id
                    },
                //表格组件
                searchQuery: '',
                gridColumns: [
                    { name: 'Name', localName: '菜单名' },
                    { name: 'Url', localName: '链接' },
                    { name: 'Icon', localName: '图标' },
                    { name: 'DisplayOrder', localName: '排序' }
                ],
                url: "/Menu/LoadData",
                searchArgs: { name: '' },
                rows: [],
            },
            methods: {
                show: function () {
                    this.modal = !this.modal;
                },
                checkOrder: function (value) {
                    return value.replace(/^[^0-9]+/, '').replace(/[^0-9]/g, '');
                },
                checkUrl: function (value) {
                    if (value == "" || value == undefined) return false;
                    var _first = value.substring(0, 1);
                    if (_first == "#" || _first == "/") return true;
                    return false;
                },
                onSubmit: function () {
                    var v_data = this.model;
                    $.post("/Menu/Edit", v_data, function (result) {
                        if (result.success) {
                            bootbox.alert("保存成功！", function () {
                                window.location.href = "/Menu/Index";
                            });
                        }
                        else {
                            bootbox.alert(result.error);
                        }
                    }, "json");
                },
                selectRow: function () {
                    var data = this.rows;
                    var _self = this;
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].checked) {
                            _self.model.parentId = data[i].Id;
                            _self.model.parentName = data[i].Name;
                            _self.show();
                            break;
                        }
                    }
                }
            }
        })

    </script>
}*@





